<template>
	<view>
		<view class="search">
			<view class="weizhi">
				<view class="info">
					<view class="name">
						<text>[当前]</text>
						{{ name || '获取中...' }}
					</view>
					<view class="all">
						{{ format || '获取中...' }}
					</view>
				</view>
				<uni-icons class="search-btn" type="search" size="55" color="#999" @click="$$p.go('home/map/search')"></uni-icons>
			</view>
			<view class="xiangxi">
				<input type="text" placeholder="请输入详细位置（门牌号、房间号）" v-model="xiangxi">
				<view @click="queren">确定</view>
			</view>
		</view>
		<map class="map" id="map" @regionchange="change(isSelect)">
			<cover-image src="/static/icon_position.png" class="icon_position"></cover-image>
		</map>
		
		<scroll-view scroll-y="true" class="pois" :show-scrollbar="false" :scroll-top="scrollTop" scroll-with-animation="true">
			<view class="pois-list" v-for="(item, index) in pois" :key="item.id" @click="select(index)">
				<view>
					<view class="name">
						{{ item.name }}
					</view>
					<view class="address">
						{{ item.address }}
					</view>
				</view>
				<uni-icons class="icons" v-if="selectId == item.id" type="checkbox-filled" size="44" :color="mainColor"></uni-icons>
			</view>
		</scroll-view>
	</view>
</template>

<script>
  import { mainColor } from '@/config/index.js'
	import amap from '@/utils/amap-wx.130.js';
	const AmapFun = new	amap.AMapWX({key: 'a7c7e8d9655710d294d8d6db64374eda'});
	export default {
		data() {
			return {
				latitude: '',
				longitude: '',
        
				format: '',
				name: '',
				pois: [],
				selectId: '',
				xiangxi: '',
				
				isSelect: 0,
				mapCtx: null,
				
        mainColor,
        
        scrollTop: 0,
        
				addressComponent: {}
			};
		},
		
		onLoad() {
      
      this.$nextTick(function(){
        this.mapCtx = uni.createMapContext('map');
      });
			
			this.initPos();
			
			// 监听从搜索页面返回的数据
			uni.$on('select:searchAddress', item => {
				const [lng, lat] = item.location.split(',');
        this.mapCtx.moveToLocation({
          latitude: +lat,
          longitude: +lng
        });
			});
			
		},
		
		methods:{
			
			// 初始化位置
			initPos() {
				uni.getLocation({
					success: res => {
            this.mapCtx.moveToLocation(res);
					},
					fail: () => {
						this.$$t.msg('获取位置错误！');
					}
				});
			},
			
			// 改变地图视图
			change(e) {
				// 点击提示地址列表时，不重新获取
				if(this.isSelect) return;
				this.mapCtx.getCenterLocation({
					success: (res) => {
            AmapFun.getRegeo({
              location: res.longitude + ',' + res.latitude,
              success: res => {
                if(res[0]) {
                  this.addressComponent = res[0].regeocodeData.addressComponent;
                  this.pois = res[0].regeocodeData.pois;
                  const first = this.pois[0];
                  this.selectId = first.id;
                  this.format = first.address;
                  this.name = first.name;
                  this.scrollTop = this.scrollTop ^ 1;
                }
              },
              fail: info => {
                console.log(info);
                this.$$t.msg('获取位置失败！')
              }
            })
					},
					fail: info => {
						this.$$t.msg('获取位置失败！')
					}
				});
			},
			
			// 选择地址
			select(idx) {
				const item = this.pois[idx];
        if(this.selectId == item.id) return;
				const [lng, lat] = item.location.split(',');
				this.isSelect ++;
        this.mapCtx.moveToLocation({
          latitude: +lat,
          longitude: +lng,
          success:() => {
            setTimeout(() => {
              this.isSelect --;
            }, 600);
          }
        })
				this.selectId = item.id;
				this.format = item.address;
				this.name = item.name;
			},
			
			// 确认选择地址
			queren() {
				let idx = this.pois.findIndex(item => item.id === this.selectId)
				idx = ~idx ? idx : 0;
				const item = this.pois[idx];
				const [lng, lat] = item.location.split(',');
				uni.$emit('select:address', {
					...item,
					lat,
					lng,
					xiangxi: this.xiangxi,
					addressComponent: this.addressComponent
				});
				this.$$t.back(500);
			}
		}
	}
</script>

<style lang="scss" scoped>
.search{
	width: 750rpx;
	height: 180rpx;
	border-top: 1px solid #f3f3f3;
	padding: 20rpx 24rpx;
	box-sizing: border-box;
	float: left;
	position: relative;
	.weizhi{
		@include flex-row;
		align-items: center;
		justify-content: space-between;
		.info{
			width: 650rpx;
		}
		.name{
			@include flex-row;
			align-content: center;
      font-size: 30rpx;
			text{
				color: red;
				margin-right: 10rpx;
        word-break: keep-all;
			}
		}
		.all{
      font-size: 28rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-top: 10rpx;
			color: #999;
		}
	}
	.xiangxi{
		@include flex-row;
		align-items: center;
		justify-content: space-between;
		input{
			width: 600rpx;
			height: 66rpx;
			border-bottom: 1px solid #f3f3f3;
			font-size: 28rpx;
		}
		view{
      font-size: 28rpx;
			width: 80rpx;
			height: 44rpx;
			line-height: 44rpx;
			text-align: center;
			background-color: $main-color;
			color: #fff;
		}
	}
}
	
.map{
	width: 750rpx;
	height: calc(100vh - 700rpx);
	position: relative;
	float: left;
	background-color: #fff;
}
.icon_position{
	width: 64rpx;
	height: 64rpx;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

.pois{
	height: calc(700rpx - 180rpx - 2px);
	float: left;
	&-list{
		margin: 0 24rpx;
		padding: 24rpx 0;
		border-bottom: 1px dashed #f3f3f3;
		@include flex-row;
		align-items: center;
		justify-content: space-between;
    position: relative;
	}
	.name{
		color: #333;
	}
	.address{
		font-size: 24rpx;
		color: #999;
	}
  .icons{
    position: absolute;
    right: 0rpx;
  }
}
</style>
